<template>
  <div id="doctorInfo" style="padding: 0 20px">
    <NavBar :title="infos.realname" />
    <header>
      <div class="topBox">
        <div class="topLeftBox">
          <h1>{{ infos.realname }}</h1>
          <p>
            <span>{{ doctor.title }}</span>
            <span class="isOTC">可开处方</span>
          </p>
          <p>执业编号：{{ doctor.practice_cert_no }}</p>
        </div>
        <div class="topRightBox">
          <img :src="infos.avatar" alt="" />
          <span class="isAuthentication">已认证</span>
        </div>
      </div>
      <div
        class="content"
        @click="$router.push('/doctor/info?user_id=' + infos.user_id)"
      >
        <p>擅长方向：{{ doctor.good_at }}</p>
        <van-icon name="arrow" />
      </div>
      <div class="btmBox">
        <div class="labels">
          <span v-for="val in doctor.labels" :key="val.label_id">{{
            val.label_name
          }}</span>
        </div>
        <div class="score">
          <van-icon
            style="font-weight: bold; font-size: 17px"
            name="star"
            color="#F8AB27"
            size="12"
          >
            {{ statistics.last_month_evaluate_score }}
          </van-icon>
          <span>
            {{ statistics.last_month_consult_case_count }}
          </span>
          月回答
          <span> {{ statistics.last_month_prescription_count }} </span>月处方
        </div>
      </div>
      <div class="card">
        <h2>
          问诊方式
          <p>
            <span>图文 ￥{{ Math.floor(doctor.consult_text_price) }}</span
            ><span>电话 ￥{{ Math.floor(doctor.consult_call_price) }}</span>
            <van-icon name="arrow" />
          </p>
        </h2>
        <div class="cardContent">
          <h3>
            {{ infos.realname }}私人宠医长期服务
            <p>
              专家次卡套餐，最高可省<span>{{
                Math.floor(price.save_money)
              }}</span
              >元
            </p>
          </h3>
          <button>￥{{ price.min_price }}起</button>
        </div>
      </div>
    </header>
    <div class="case">
      <h2>问诊病例</h2>
      <div class="caseContent">
        <Case />
        <a
          @click="
            $router.push('/doctor/caseList?user_id=' + store.params.user_id)
          "
          ><span>更多问诊病例</span><van-icon name="arrow"
        /></a>
      </div>
      <div class="userComment">
        <h2>宠主评价</h2>
        <PetMaster />
        <a
          @click="
            $router.push('/doctor/petList?user_id=' + store.params.user_id)
          "
          ><span>更多真实评价</span><van-icon name="arrow"
        /></a>
      </div>
      <div class="caseBtm">
        <img src="../../img/btm.jpg" alt="" />
      </div>
    </div>
    <div class="null"></div>
    <footer>
      <van-button id="ask" type="success"
        >向{{ infos.realname }}提问</van-button
      >
    </footer>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
import { getDoctorInfos, getDoctorPrices } from "../../API";
import { useCount } from "../../store/index";
import Case from "../../components/Doctor/Case.vue";
import NavBar from "../../components/NavBar.vue";
import PetMaster from "../../components/Doctor/PetMaster.vue";
let store = useCount();
let route = useRoute();
let router = useRouter();

// 存放数据
let infos = ref({});
let price = ref({});
let doctor = ref({});
let statistics = ref({});

// 医生详情接口
let getInfos = async () => {
  let use_id = route.query.user_id;
  let { data } = await getDoctorInfos(use_id);
  infos.value = data.data;
  // console.log(infos.value);
  doctor.value = data.data.doctor;
  // console.log(doctor.value);
  statistics.value = data.data.doctor.statistics;
  // console.log(statistics.value);
};

// 套餐价格接口
let getPrice = async () => {
  let use_id = route.query.user_id;
  let { data } = await getDoctorPrices(use_id);
  price.value = data.data.package;
  // console.log(price.value);
};
getInfos();
getPrice();

// 将use_id传出去
store.changeParams({ user_id: route.query.user_id, page: 1, limit: 3 });
</script>
<style scoped>
#doctorInfo {
  overflow: auto;
}
header {
  margin-bottom: 80px;
}
.topBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topRightBox {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.topLeftBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.isOTC {
  width: 114px;
  height: 36px;
  margin-left: 15px;
  font-size: 20px;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e2edff;
  color: #668df4;
  border-radius: 10px;
}
.topLeftBox p {
  font-size: 28px;
  color: #727272;
}
.topLeftBox p:nth-of-type(1) {
  margin: 20px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.topRightBox img {
  width: 108px;
  height: 108px;
  margin-bottom: 20px;
  border-radius: 10px;
}
.isAuthentication {
  width: 114px;
  height: 48px;
  font-size: 26px;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eff8f5;
  color: #1ec7af;
  border-radius: 20px;
}
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
}
.content p {
  color: #727272;
  font-size: 28px;
  width: 90%; /* 设置段落的宽度 */
  height: 70px; /* 设置段落的高度 */
  overflow: hidden; /* 隐藏超出高度的内容 */
  display: -webkit-box; /* 将段落视为弹性伸缩盒子 */
  -webkit-line-clamp: 2; /* 设置最大显示行数为2行 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子的排列方向为垂直 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.btmBox {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  margin-top: 30px;
}
.labels {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.labels span {
  padding: 5px;
  color: #727272;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #eee;
  margin-right: 20px;
}
.score {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 26px;
  margin: 30px 0;
}
.score span {
  font-weight: bolder;
  margin-left: 50px;
  font-size: 36px;
}
.card h2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card h2 p {
  font-size: 34px;
  color: #1ec7af;
}
.card h2 p span {
  margin-left: 30px;
}
.cardContent {
  width: 100%;
  height: 136px;
  margin-top: 30px;
  padding: 20px 40px;
  box-sizing: border-box;
  background-image: url(https://cdn.moguvet.com/c/custom/pack/doctor-home-pack-bgc.png);
  background-size: cover;
  border-radius: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cardContent h3 {
  color: white;
  font-size: 30px;
}
.cardContent h3 p {
  font-size: 20px;
  font-weight: normal;
  margin-top: 10px;
  background-color: #11bda5;
}
.cardContent h3 p span {
  font-weight: bolder;
}
.cardContent button {
  border: none;
  background-color: white;
  color: #1ec7af;
  font-size: 28px;
  font-weight: bolder;
  padding: 20px;
  border-radius: 40px;
}
footer {
  width: 100%;
  height: 150px;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 4px solid #eff8f5;
  background-color: white;
}
#ask {
  width: 90%;
  height: 110px;
  border-radius: 60px;
  font-size: 35px;
  font-weight: bolder;
  background-color: #1ec7af;
}
.case h2 {
  margin-bottom: 20px;
}
a {
  width: 100%;
  color: #1ec7af;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 29px;
  margin: 40px 0;
}
a span {
  margin-right: 10px;
}
.caseBtm {
  width: 100%;
  height: 40%;
  margin-bottom: 300px;
}
.caseBtm img {
  width: 100%;
  height: 40%;
}
</style>